<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>房型管理</title>
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/easyui/1.3.4/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/css/wu.css" />
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/css/icon.css" />
	<script type="text/javascript" src="../../admin/easyui/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../admin/easyui/easyui/1.3.4/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../admin/easyui/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<body class="easyui-layout">
	<div class="easyui-layout" data-options="fit:true">
		<!-- Begin of toolbar -->
		<div id="wu-toolbar">
			<h2>房型列表</h2>
			<div class="wu-toolbar-button">
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAddMenu()"
					plain="true">添加</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-bullet-edit" onclick="openEdit()"
					plain="true">编辑</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="remove()"
					plain="true">删除</a>

			</div>
			<div class="wu-toolbar-search">
				<label>房间类型名称:</label><input id="search-name" class="wu-text" style="width:100px">
				<label>状态:</label>
				<select id="search-status" class="easyui-combobox" panelHeight="auto" style="width:120px">
					<option value="-1">全部</option>
					<option value="0">房型已满</option>
					<option value="1">可预订可入住</option>
				</select>
				<a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
			</div>
		</div>
		<!-- End of toolbar -->
		<table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar">
			<tbody>
				<tr>
					<td>单人间</td>
					<td>123</td>
					<td>1</td>
					<td>1</td>
					<td>12</td>
					<td>10</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>单人间只能一个人居住</td>
				</tr>
				<tr>
					<td>普通大床房</td>
					<td>200</td>
					<td>2</td>
					<td>1</td>
					<td>15</td>
					<td>15</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>1</td>
					<td>普通大床房，面积25平左右！</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- 添加弹框 -->
	<div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
		style="width:420px; padding:10px;">
		<form id="add-form" method="post">
			<table>
				<tr>
					<td width="60" align="right">图片预览:</td>
					<td valign="middle">
						<img id="preview-photo" style="float:left;" src="/admin/easyui/images/user_photo.jpg"
							width="100px">
						<a style="float:left;margin-top:40px;" href="javascript:void(0)" class="easyui-linkbutton"
							iconCls="icon-upload" onclick="uploadPhoto()" plain="true">上传图片</a>
					</td>
				</tr>
				<tr>
					<td width="60" align="right">房型图片:</td>
					<td><input type="text" id="add-photo" name="photo"
							value="/admin/easyui/images/user_photo.jpg" readonly="readonly"
							class="wu-text " /></td>
				</tr>
				<tr>
					<td align="right">名称:</td>
					<td><input type="text" id="add-name" name="name" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型名称'" /></td>
				</tr>
				<tr>
					<td align="right">价格:</td>
					<td><input type="text" id="add-price" name="price" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型价格'" /></td>
				</tr>
				<tr>
					<td align="right">可住人数:</td>
					<td><input type="text" id="add-liveNum" name="liveNum" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型可住人数'" /></td>
				</tr>
				<tr>
					<td align="right">床位数:</td>
					<td><input type="text" id="add-bedNum" name="bedNum" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型床位数'" /></td>
				</tr>
				<tr>
					<td align="right">房间数:</td>
					<td><input type="text" id="add-roomNum" name="roomNum" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型房间数'" /></td>
				</tr>
				<tr>
					<td align="right">状态:</td>
					<td>
						<select id="add-status" name="status" class="easyui-combobox" panelHeight="auto"
							style="width:268px">
							<option value="0">房型已满</option>
							<option value="1">可预订可入住</option>
						</select>
					</td>
				</tr>
				<tr>
					<td align="right">备注:</td>
					<td><textarea id="add-remark" name="remark" rows="6" class="wu-textarea"
							style="width:260px"></textarea></td>
				</tr>
			</table>
		</form>
	</div>
	<!-- 修改窗口 -->
	<div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
		style="width:450px; padding:10px;">
		<form id="edit-form" method="post">
			<input type="hidden" name="id" id="edit-id">
			<table>
				<tr>
					<td width="60" align="right">图片预览:</td>
					<td valign="middle">
						<img id="edit-preview-photo" style="float:left;" src="/admin/easyui/images/user_photo.jpg"
							width="100px">
						<a style="float:left;margin-top:40px;" href="javascript:void(0)" class="easyui-linkbutton"
							iconCls="icon-upload" onclick="uploadPhoto()" plain="true">上传图片</a>
					</td>
				</tr>
				<tr>
					<td width="60" align="right">房型图片:</td>
					<td><input type="text" id="edit-photo" name="photo"
							value="/admin/easyui/images/user_photo.jpg" readonly="readonly"
							class="wu-text " /></td>
				</tr>
				<tr>
					<td align="right">名称:</td>
					<td><input type="text" id="edit-name" name="name" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型名称'" /></td>
				</tr>
				<tr>
					<td align="right">价格:</td>
					<td><input type="text" id="edit-price" name="price" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型价格'" /></td>
				</tr>
				<tr>
					<td align="right">可住人数:</td>
					<td><input type="text" id="edit-liveNum" name="liveNum" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型可住人数'" /></td>
				</tr>
				<tr>
					<td align="right">床位数:</td>
					<td><input type="text" id="edit-bedNum" name="bedNum" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型床位数'" /></td>
				</tr>
				<tr>
					<td align="right">房间数:</td>
					<td><input type="text" id="edit-roomNum" name="roomNum" class="wu-text easyui-validatebox"
							data-options="required:true, missingMessage:'请填写房间类型房间数'" /></td>
				</tr>
				<tr>
					<td align="right">状态:</td>
					<td>
						<select id="edit-status" name="status" class="easyui-combobox" panelHeight="auto"
							style="width:268px">
							<option value="0">房型已满</option>
							<option value="1">可预订可入住</option>
						</select>
					</td>
				</tr>
				<tr>
					<td align="right">备注:</td>
					<td><textarea id="edit-remark" name="remark" rows="6" class="wu-textarea"
							style="width:260px"></textarea></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="process-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-upload',title:'正在上传图片'"
		style="width:450px; padding:10px;">
		<div id="p" class="easyui-progressbar" style="width:400px;" data-options="text:'正在上传中...'"></div>
	</div>
	<input type="file" id="photo-file" style="display:none;" onchange="upload()">


	<!-- End of easyui-dialog -->
	<script type="text/javascript">
		//上传图片
		function start() {
			var value = $('#p').progressbar('getValue');
			if (value < 100) {
				value += Math.floor(Math.random() * 10);
				$('#p').progressbar('setValue', value);
			} else {
				$('#p').progressbar('setValue', 0)
			}
		};
		function upload() {
			if ($("#photo-file").val() == '') return;
			var formData = new FormData();
			formData.append('photo', document.getElementById('photo-file').files[0]);
			$("#process-dialog").dialog('open');
			var interval = setInterval(start, 200);
			$.ajax({
				url: '../user/upload_photo',
				type: 'post',
				data: formData,
				contentType: false,
				processData: false,
				success: function (data) {
					clearInterval(interval);
					$("#process-dialog").dialog('close');
					if (data.type == 'success') {
						$("#preview-photo").attr('src', data.filepath);
						$("#add-photo").val(data.filepath);
						$("#edit-preview-photo").attr('src', data.filepath);
						$("#edit-photo").val(data.filepath);
					} else {
						$.messager.alert("消息提醒", data.msg, "warning");
					}
				},
				error: function (data) {
					clearInterval(interval);
					$("#process-dialog").dialog('close');
					$.messager.alert("消息提醒", "上传失败!", "warning");
				}
			});
		}

		function uploadPhoto() {
			$("#photo-file").click();

		}


		/**
		*  添加记录
		*/
		function add() {
			var validate = $("#add-form").form("validate");
			if (!validate) {
				$.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
				return;
			}
			var data = $("#add-form").serialize();
			$.ajax({
				url: 'add',
				dataType: 'json',
				type: 'post',
				data: data,
				success: function (data) {
					if (data.type == 'success') {
						$.messager.alert('信息提示', '添加成功！', 'info');
						$("#add-name").val('');
						$("#add-remark").val('');
						$('#add-dialog').dialog('close');
						$('#data-datagrid').datagrid('reload');
					} else {
						$.messager.alert('信息提示', data.msg, 'warning');
					}
				}
			});
		}

		/**
		* 编辑记录
		*/
		function edit() {
			var validate = $("#edit-form").form("validate");
			if (!validate) {
				$.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
				return;
			}
			var data = $("#edit-form").serialize();
			$.ajax({
				url: 'edit',
				dataType: 'json',
				type: 'post',
				data: data,
				success: function (data) {
					if (data.type == 'success') {
						$.messager.alert('信息提示', '修改成功！', 'info');
						$('#edit-dialog').dialog('close');
						$('#data-datagrid').datagrid('reload');
					} else {
						$.messager.alert('信息提示', data.msg, 'warning');
					}
				}
			});
		}


		/**
		* 删除记录
		*/
		function remove() {
			$.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
				if (result) {
					var item = $('#data-datagrid').datagrid('getSelected');
					if (item == null || item.length == 0) {
						$.messager.alert('信息提示', '请选择要删除的数据！', 'info');
						return;
					}

					$.ajax({
						url: 'delete',
						dataType: 'json',
						type: 'post',
						data: { id: item.id },
						success: function (data) {
							if (data.type == 'success') {
								$.messager.alert('信息提示', '删除成功！', 'info');
								$('#data-datagrid').datagrid('reload');
							} else {
								$.messager.alert('信息提示', data.msg, 'warning');
							}
						}
					});
				}
			});
		}

		/**
		* Name 打开编辑窗口
		*/
		function openEdit() {
			//$('#add-form').form('clear');
			var item = $('#data-datagrid').datagrid('getSelected');
			if (item == null || item.length == 0) {
				$.messager.alert('信息提示', '请选择要编辑的数据！', 'info');
				return;
			}
			$('#edit-dialog').dialog({
				closed: false,
				modal: true,
				title: "编辑房间类型信息",
				buttons: [{
					text: '确定',
					iconCls: 'icon-ok',
					handler: edit
				}, {
					text: '取消',
					iconCls: 'icon-cancel',
					handler: function () {
						$('#edit-dialog').dialog('close');
					}
				}],
				onBeforeOpen: function () {
					//$("#add-form input").val('');
					$("#edit-id").val(item.id);
					$("#edit-name").val(item.name);
					$("#edit-price").val(item.price);
					$("#edit-liveNum").val(item.liveNum);
					$("#edit-bedNum").val(item.bedNum);
					$("#edit-roomNum").val(item.roomNum);
					$("#edit-status").combobox('setValue', item.status);
					$("#edit-remark").val(item.remark);
					$("#edit-preview-photo").attr('src', item.photo);
					$("#edit-photo").val(item.photo);
				}
			});
		}

		/**
		* Name 打开添加窗口
		*/
		function openAdd() {
			//$('#add-form').form('clear');
			$('#add-dialog').dialog({
				closed: false,
				modal: true,
				title: "添加房间类型信息",
				buttons: [{
					text: '确定',
					iconCls: 'icon-ok',
					handler: add
				}, {
					text: '取消',
					iconCls: 'icon-cancel',
					handler: function () {
						$('#add-dialog').dialog('close');
					}
				}],
				onBeforeOpen: function () {
					//$("#add-form input").val('');

				}
			});
		}

		//搜索按钮监听
		$("#search-btn").click(function () {
			var option = { name: $("#search-name").val() };
			var status = $("#search-status").combobox('getValue');
			if (status != -1) {
				option.status = status;
			}
			$('#data-datagrid').datagrid('reload', option);
		});


		/** 
		* 载入数据
		*/
		$('#data-datagrid').datagrid({
			url: 'list',
			rownumbers: true,
			singleSelect: true,
			pageSize: 20,
			pagination: true,
			multiSort: true,
			fitColumns: true,
			idField: 'id',
			treeField: 'name',
			fit: true,
			columns: [[
				{ field: 'chk', checkbox: true },
				{ field: 'name', title: '名称', width: 100, sortable: true },
				{ field: 'price', title: '价格', width: 100, sortable: true },
				{ field: 'liveNum', title: '可住人数', width: 100, sortable: true },
				{ field: 'bedNum', title: '床位数', width: 100, sortable: true },
				{ field: 'roomNum', title: '房间数', width: 100, sortable: true },
				{ field: 'avilableNum', title: '可用房间数', width: 100, sortable: true },
				{ field: 'bookNum', title: '已预定数', width: 100, sortable: true },
				{ field: 'livedNum', title: '已入住数', width: 100, sortable: true },
				{
					field: 'status', title: '状态', width: 100, formatter: function (value, row, index) {
						switch (value) {
							case 0: {
								return '房型已满';
							}
							case 1: {
								return '可预订可入住';
							}
						}
						return value;
					}
				},
				{ field: 'remark', title: '房间类型备注', width: 200 },
			]]
		});
	</script>

</body>

</html>